<template>
  <div class="w-100 position-relative">
    <div style="padding: 3px;" class="flex_between_center full-width min-width-130 bg-black position-relative">
      <div class="bg-white min-width-14 w-15 py-5 position-absolute rounded-5 rounded-right-0" style="left: 3px;">
        <img @click="handleJump('/', '首页')" class="width-13 height-5 ml-8 cursor-pointer" :src="Logo" alt="logo">
      </div>
      <ul style="margin-left:14%;margin-right: 206px;" class="w-100 height-10">
        <div class="bg-white w-100 d-flex h-100 py-5 rounded-5 rounded-left-0">
          <li @mousemove="handleShow(index)" class="width-4 mx-10 cursor-pointer flex_center" v-for="(item, index) in state.headerList" :key="item.id">{{item.name}}</li>
        </div>
      </ul>
      <ul class="d-flex p-0 position-absolute right-0" style="margin-right:3px">
        <li
          class="webList position-relative width-10 height-10 flex-column flex_center bg-white cursor-pointer rounded-5"
          style="margin-left:3px;"
          v-for="(item, index) in state.leftList"
          :key="index"
          @click="handleChangeLan(index)"
        >
          <img class="width-2 height-2 mb-1" :src="item.icon" alt="icon"/>
          <span class="text-gray-light text-12">{{item.title}}</span>
          <div style="width: 203px; top: 102px; left: 0" v-if="index === 0" class="list position-absolute height-0 of-hidden z-index-999 rounded-5">
            <a
              class="alink flex_between_center w-100 height-7 py-2 px-5 border border-bottom bg-white"
              :key="index"
              v-for="(i, index) in state.websites"
              target="_blank"
              :href="i.link"
            >
              <el-image fit="fill" :class="index === 0 ? 'alink1' : (index === 1 ? 'alink2': 'alink3')" class="cursor-pointer" :src="i.logo" alt="picture"/>
            </a>
          </div>
        </li>
      </ul>
    </div>
    <div :class="state.curId === '' ? '' : 'broaden'" class="position-absoulute top-100 subNav full-width height-0 of-hidden">
      <div @mouseleave="state.curId = ''" class="bg-black d-flex">
        <div
          class="width-39 px-7 flex_between_center flex-shrink-0 rounded-15 bg-black-light2">
          <span class="text-orange text-30">{{state.moduleName}}.</span>
          <span class="width-1 height-2 cursor-pointer" alt="right"> > </span>
        </div>
        <ul v-if="state.curId !== ''" class="d-flex flex-fill flex-wrap px-0">
          <div
          @click="handleJump(sub.forward, sub.name, sub.id)"
            v-for="sub in state.subNavigation"
            :key="sub.id"
            :class="state.subNavigation?.length % 3 === 0 ? 'w-33' : 'w-49'"
            style="margin-left: 2px"
            class="position-relative text-24 text-white flex-fill cursor-pointer"
          >
            <el-image fit="fill" class="rounded-5 w-100 h-100" :src="sub.navigationImg"></el-image>
            <div class="position-absolute top-0 blur w-100 h-100 flex_center"><span>{{sub.name}}</span></div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup >
import Logo from '@/assets/images/kupoLogo.svg'
import homeQun from '@/assets/images/Home_qun.png'
import homeType from '@/assets/images/Home_type.png'
import homeSousuo from '@/assets/images/Home_sousuo.png'
import aboutArrow from '@/assets/images/aboutArrow.png'
import { ElMessage } from 'element-plus'
import { reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import userStore from '@/store/index'
import urls from '@/api/index'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const state = reactive({
  headerList: [],
  moduleName: '',
  moduleKey: '',
  moduleUrl: '',
  moduleId: '',
  subNavigation: [],
  leftList: [{
    title: '网站群',
    icon: homeQun
  },
  {
    title: '中文',
    icon: homeType
  }],
  websites: [],
  curId: ''
})
watch(() => userStore.state.lang, (newVal, oldVal) => {
  getMenuList()
  if (newVal === 'en_US') {
    locale.value = 'en_US'
  } else {
    locale.value = 'zh_CN'
  }
})
watch(() => state.curId, (newVal, oldVal) => {
  if (newVal !== '') {
    state.moduleName = state.headerList[newVal].name
    switch (state.moduleName) {
      case '关于库珀':
        state.moduleKey = 'message.ABOUT_KUPO'
        state.moduleUrl = '/introduce'
        state.moduleId = '62d6bf34e1d8375b113f70a3'
        break
      case '创新科技':
        state.moduleKey = 'message.ABOUT_KUPO'
        state.moduleUrl = '/finance'
        state.moduleId = '62d6c0bbe1d8375ba8ffe0b7'
        break
      case '媒体资源':
        state.moduleKey = 'message.ABOUT_KUPO'
        state.moduleUrl = '/news'
        state.moduleId = '62d6bfcbe1d8375b113f70a9'
        break
      case '联系我们':
        state.moduleKey = 'message.ABOUT_KUPO'
        state.moduleUrl = '/concatDetail'
        state.moduleId = '62d6c005e1d8375b113f70ab'
        break
      default:
        break
    }
    state.subNavigation = state.headerList[newVal].subNavigation
  }
})
const getMenuList = () => {
  urls.home.getMenuList(userStore.state.lang)
    .then((res) => {
      state.headerList = res.data.navigations
      state.websites = res.data.websites
    })
    .catch((err) => {
      ElMessage.error(err.msg)
    })
}
getMenuList()
const router = useRouter()
const handleJump = (path, name, id = '') => {
  if (id !== '') {
    router.push({
      path,
      query: {
        id
      }
    })
    let key = ''
    switch (id) {
      case '62d6bf34e1d8375b113f70a3':
        key = 'message.INTRODUCE'
        break
      case '62d6bf52e1d8375b113f70a4':
        key = 'message.BUSINESS'
        break
      case '62d6bf67e1d8375b113f70a5':
        key = 'message.DEVELOPMENT'
        break
      case '62d6bf71e1d8375b113f70a6':
        key = 'message.CULTURE'
        break
      case '62d6bf7de1d8375b113f70a7':
        key = 'message.MANAGE'
        break
      case '62d6bf89e1d8375b113f70a8':
        key = 'message.HONOR'
        break
      case '62d6c0bbe1d8375ba8ffe0b7':
        key = 'message.FINANCE'
        break
      case '62d6c0d0e1d8375ba8ffe0b8':
        key = 'message.SUPERVISE'
        break
      case '62d6c0dae1d8375ba8ffe0b9':
        key = 'message.SECURITY'
        break
      case '62d6bfcbe1d8375b113f70a9':
        key = 'message.NEWS'
        break
      case '62d6bfd8e1d8375b113f70aa':
        key = 'message.VIEWS'
        break
      case '62d6c005e1d8375b113f70ab':
        key = 'message.COOP'
        break
      case '62d6c012e1d8375b113f70ac':
        key = 'message.ADDRESS'
        break
      case '62d6c01ce1d8375b113f70ad':
        key = 'message.JOBS'
        break
      default:
        break
    }
    userStore.commit('ADDBREADCRUMB', [{ path: state.moduleUrl, name: state.moduleKey, query: { id: state.moduleId } }, { path, name: key, query: { id } }])
  } else {
    router.push({
      path
    })
  }
}
const handleChangeLan = (index) => {
  if (index === 1) {
    if (state.leftList[1].title === '中文') {
      state.leftList[0].title = 'WebSitesGroup'
      state.leftList[1].title = 'English'
      userStore.commit('CHNAGELAN', 'en_US')
    } else {
      state.leftList[0].title = '网站群'
      state.leftList[1].title = '中文'
      userStore.commit('CHNAGELAN', 'zh_CN')
    }
  }
}
const handleShow = (id) => {
  state.curId = id
}
const handleHide = () => {
  state.curId = ''
}

</script>

<style lang="scss" scoped>
.broaden{
  height: calc( 100vh - 100px )!important;
  background-color: rgba($color: #000000, $alpha: 0.4);
  backdrop-filter: blur(3px);
  color: #333!important;
}
.webList:hover{
  .list {
    height: auto!important;
    overflow: auto!important;
    transition: all 1s ease;
  }
}
.blur{
  background-color: rgba($color: #000000, $alpha: 0.7);
  // backdrop-filter: blur(3px);
}
.blur:hover{
  background-color: transparent;
  // backdrop-filter: none;
}
.alink:hover{
  background-color: #333!important;
}
.alink1{
  width: 150px;
  height: 44px;
}
.alink2{
  width: 138px;
  height: 50px;
}
.alink3{
  width: 150px;
  height: 34px;
}
</style>
